<template>
  <div class="about">
    <h2>新增页面</h2>
    <input type="text" placeholder="输入任务名称" v-model="inputText">
    <button @click="add">新增任务</button>
  </div>
</template>
<script setup>
import {ref} from 'vue'
import {useTasklistStore } from '../stores/tasklist'
import {useRouter,useRoute} from 'vue-router'
var inputText = ref('')
var store =useTasklistStore()
var $route =useRoute()
var $router =useRouter()
// 新增任务
var add=()=>{
  // 调用仓库汇总的方法addSas，新增任务
  store.addSas(inputText.value);
  inputText.value ='';
  $router.push('/home')
}
</script>

<style scoped>
.about{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.about h2{
  margin: 2vh auto;
  text-align: center;
  width: 100vw;
}
.about input{
  box-sizing: border-box;
  padding: 15px;
  margin: 2vh auto;
  width: 95vw;
  height: 7vh;
  border-radius: 5px;
  cursor: none;
  outline: none;
}
.about button{
  width: 95vw;
  height: 6vh;
  border: green solid 1px ;
  border-radius: 5px;
  color: green;
  background: transparent;
}
</style>
